<template>
  <div class="container">
      <h3>vuex------------ {{num}}</h3>
      <h4>vuex------------{{this.$store.getters.getnum}}</h4>
      <h4>moduleA--------{{this.$store.state.aa.aaa}}</h4>
    <h4>moduleB--------{{this.$store.state.bb.aaa}}</h4>
      <button @click="addfun()">num++</button><br><br>
      <el-input v-model="num1" placeholder="请输入内容"></el-input>
     
  <el-select placeholder="请选择" v-model="sel">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.label">
      <!-- :value="item.label"就是select的值 -->
    </el-option>
  </el-select>

      <el-input v-model="num2" placeholder="请输入内容"></el-input><br><br>
        <el-button type="success" @click="sum()">=</el-button>
      <span>{{this.$store.state.jieguo}}</span>
  </div>
</template>

<script>
// 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；计算属性封装
import {mapState,} from 'vuex';

export default {
 computed:{
   ...mapState({
       num:state=>state.num
   })     
  },
  data() {
    return {
        num1:0,
        fu:'+',
        num2:0,
        options: [{
          value: '选项1',
          label: '+'
        }, {
          value: '选项2',
          label: '-'
        }, {
          value: '选项3',
          label: '*'
        }, {
          value: '选项4',
          label: '/'
        }, {
          value: '选项5',
          label: '%'
        }],
         sel: '+'
    }
  },
  
  methods:{
      addfun(){
         this.$store.commit('addnum',100)
      },
      sum(){
       let  obj={
              n1:parseFloat(this.num1),
              n2:parseFloat(this.num2) ,
              fu:this.sel
          }

          this.$store.dispatch('myjisuanqi',obj)
        //   格式不符合vuex
        //   this.$store.commit('dengyu',obj)
      }
  },
  components: {

  }
}
</script>

<style scoped>
.el-input{
  width:30%;
}
.el-select{
  width:20%;
}
</style>
